<template>
	<view class="content">
		<uni-popup :show="type === 'choose'" position="bottom" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">选择升级方式 </text>
				<view class="uni-tip-group-button">
					<radio-group @change="radioChange">
						<view v-for="(item,index) in levelItems" :key="index" class=" flex aic jsb" style="border-top: 2upx solid #eee;margin-right: 16upx;padding:10upx 0;">
							<view class="flex aic">
								<label class="label-2-text" :for="item">
									<text>{{item.name}}</text><!-- <text v-if="item.name=='balance'">￥1000.00</text> -->
								</label>
							</view>
							<radio :id="item.name" :value="item.id" :checked="item.checked" color="#EC6104"></radio>
						</view>
					</radio-group>
				</view>
				<text class="uni-tip-group-button" @click="OperatorUpgrade()">确定 </text>
			</view>
		</uni-popup>
		<view class="pageHeader">
			运营升级
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
		<view class="regoodbox">
			
			
			<!-- 当前会员信息 -->
			<view style="background-color: #fff;border-radius: 10upx;margin: 20upx 0;">
				<view style="position: relative;">
					<view style="padding:12upx 30upx;border-bottom: 2upx solid #eee;">
						<image src="../../static/y-1.png" class="membericon"></image>
						<text style="color: #333;font-size: 28upx;display: inline-block;margin-left: 12upx;">{{level.grade_title}}</text>
					</view>
					<text style="position: absolute;right:20upx;top:24upx;color: #999;font-size: 24upx;">当前会员等级</text>
				</view>
				<view style="padding:20upx 30upx;font-size: 26upx;color: #999;">{{level.msg}}</view>
			</view>
			
			
			<!-- 待升级或者已满足升级条件 -->
			<view v-for="(item, index) in levelList" :key="index" style="background-color: #fff;border-radius: 10upx;margin-bottom: 20upx;">
				<view style="position: relative;">
					<view style="padding:12upx 30upx;border-bottom: 2upx solid #eee;">
						<image src="../../static/y-2.png" class="membericon"></image>
						<text style="color: #333;font-size: 28upx;display: inline-block;margin-left: 12upx;">{{item.grade_title}}</text>
					</view>
				</view>
				<view style="padding:20upx 30upx;font-size: 26px;color: #999;">
					<view class="flex aic jsb">
						<view style="max-width: 75%;font-size: 24upx;color: #999;line-height: 1.75;">
							{{item.msg}}
						</view>
						
						<button v-if="item.grade<level.grade" class="lvbtn unenough" >已升级</button>
						<button v-if="item.grade==dlevel" class="lvbtn enough" @click="togglePopup('choose',item.id)">升级</button>						
						<button v-if="item.grade>dlevel" class="lvbtn unenough" >待升级</button>												
												
					</view>		
				</view>
			</view>
			
			
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken:'',// token
				levelList:[],
				type:'',// 弹窗类型
				levelindex:1,
				id:0,
				level:[],
				dlevel:0,
				levelItems:[
					{
						name: '文件持量',
						id:1,
						checked: true
					},
					{
						name:'市场销售业绩',
						id:2,
						checked: false
					},
					{
						name: '红包业绩升级',
						id:3,
						checked: false
					},
					{
						name:'志愿积分质权升级',
						id:4,
						checked: false
					}
				]
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.leveList()
						
		},
		components: {
			uniPopup
		},
		methods: {
			togglePopup(type,id) {
				let dl=this.dlevel
				
				if(this.levelList[dl].is_level==0){
					uni.showToast({title:'您还不具备升级条件,请再继续努力！', icon:'none'})	
						
					return
				}
				
				
				
				this.type = type;
				this.id = id;
			},
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			OperatorUpgrade:function(){
				let that = this
				postAjax('User/OperatorUpgrade', {
					token:that.userToken,
					id:that.id,
					type:that.type,
					}, function(data) {
						uni.showToast({
						  title:data.msg,
						  icon:'none'
						})	
						
						if(data.code==0){
							uni.setStorageSync('userinfo.level', dlevel);
						
						}
				
				})
			},
			leveList:function(){
				let that = this			
								
				postAjax('User/levelShow', {token:that.userToken}, function(data) {
					// console.log(data.data.level)
									
										
					if (data.code == 0) {						
						that.levelList = data.data.data													
						that.level = data.data.level	
						that.dlevel=data.data.level.grade*1+1											
						
					}else{
						that.leveList()
					}
				
				})
			},
			radioChange: function(e) {
				let that = this
				
				that.levelindex= e.detail.value
				
			},
			
		}
	}
	
</script>

<style>
	.content{min-height: 100vh;background-color: #F9F9F9;}
	.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.regoodbox{padding: 170upx 30upx 22upx;}
	.flex-7{flex:5;max-width:50%;}
	.flex-1{flex:2;max-width:20%;}
	.flex-2{flex:3;max-width:30%;}
	.eliplis{overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
	.membericon{width: 34upx;height: 34upx;vertical-align: middle;}
	.lvbtn{margin: 0;display: block;font-size: 28upx;color: #fff;padding: 0;width:130upx;border-radius: 6upx;height: 60upx;line-height: 60upx;}
	.lvbtn::after{border: none;}
	.enough{background-color: #EC6104;}
	.unenough{background-color: #ddd;}
	.paybox{background-color: #fff;border-radius: 20upx;}
	.label-2-text{font-size: 28upx;color: #333;margin-left: 20upx;}
	.choosetype{padding: 20upx 40upx 20upx 0;font-size: 30upx;color: #333;margin-top: 24upx;text-indent: 20upx;}
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 10upx 0;
		width: 100%;
		background-color: #fff;
		border-radius: 10px 10upx 0 0 ;
	}
	
	.uni-tip-title {
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}
	
	.uni-tip-content {
		padding: 10upx 0;
		text-align: center;
		font-size: 16px;
		color: #666;
	}
	
	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		justify-content: center;
		text-indent: 20upx;
		width: 100%;
		/* #endif */
	}
	.uni-tip-group-button uni-radio-group{width: 100%;}
	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
</style>
